<template>
	<view class="page">
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content" class="text-white">萌宠乐园</block>
		</cu-custom>
		<!-- 分类 -->
		<view class="margin">
			<uni-row :gutter="20">
				<uni-col :span="6">
					<view
						style="text-align: center;background-color: #ffaa00;height: 100rpx;line-height: 100rpx;color: white;"
						@click="selectPetConent('沙雕集锦')">
						#沙雕集锦
					</view>
				</uni-col>
				<uni-col :span="6">
					<view
						style="text-align: center;background-color: #55aaff;height: 100rpx;line-height: 100rpx;color: white;"
						@click="selectPetConent('萌宠故事')">
						#萌宠故事
					</view>
				</uni-col>
				<uni-col :span="6">
					<view
						style="text-align: center;background-color: #55aa7f;height: 100rpx;line-height: 100rpx;color: white;"
						@click="selectPetConent('养宠知识')">
						#养宠知识
					</view>
				</uni-col>
				<uni-col :span="6">
					<view
						style="text-align: center;background-color: #ffaaff;height: 100rpx;line-height: 100rpx;color: white;"
						@click="selectPetConent('相亲配对')">
						#相亲配对
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="margin">#{{content}}</view>
		<!--  -->
		<view class="margin">
			<uni-grid :column="2" :showBorder="false">
				<uni-grid-item v-for="(item,index) in 5" :key="index" class="margin-bottom-lg">
					<view style="border: 1px solid #acacac;box-shadow: 1px 1px 1px 1px rgba(102, 102, 102, 0.2)"
						class="margin-xs">
						<image src="../../static/gg.png" style="height: 250rpx;width: 100%;"></image>
						<view style="text-align: center;font-size: 20rpx;">测试测试测试测试测试</view>
						<view>
							<uni-row>
								<uni-col :span="4" style="text-align: center;">
									<image style="height: 50rpx;width: 50rpx;border-radius: 50%;"
										src="../../static/uni.png"></image>
								</uni-col>
								<uni-col :span="20">
									<view class="margin-left-xs" style="height: 50rpx;line-height: 50rpx;">
										<text>老黄学长</text>
									</view>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<view class="floatBtn" @click="addContent">
			<uni-icons type="plusempty" color="#ffaa00" size="40"></uni-icons>
		</view>

		<!-- 底部占位 -->
		<view style="height: 150rpx;"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '沙雕集锦'
			}
		},
		methods: {
			addContent() {
				uni.navigateTo({
					url: '/pages/star/content'
				})
			},
			selectPetConent(value) {
				this.content = value;
			},
		}
	}
</script>

<style>
	.floatBtn {
		/* background-color: rgba(227, 227, 227, 0.8); */
		text-align: center;
		position: fixed;
		right: 5%;
		bottom: 10%;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50%;
		/* box-shadow: 1px 5px 8px rgba(222, 222, 222, 0.5); */
	}
</style>